import React, {useEffect, useState} from 'react'
import {getDeleted} from "../utils/requests";
import {Button, Image, Layout, List, message, Tag, Typography} from "antd";
import moment from "moment";
import './Recover.css'
import {DeleteOutlined, ReloadOutlined} from "@ant-design/icons";

const {Header, Content, Footer} = Layout;

const pageSize=10;

export default function Recover() {
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [data, setData] = useState([])
  const [loading, setLoading] = useState([])
  useEffect(() => {
    setLoading(true)
    getDeleted(page, pageSize).then(({data, total}) => {
      setData(data)
      setTotal(total)
    }).catch(() => {
      message.error('获取失败')
    }).finally(()=>{
      setLoading(false)
    })
  }, [page])

  return (
      <Layout className={'layout'}>
        <Header className={'header'}>
          消失的
          <Button disabled={loading} type={'link'} onClick={()=>{
            setLoading(true)
            getDeleted(page, pageSize).then(({data, total}) => {
              setData(data)
              setTotal(total)
            }).catch(() => {
              message.error('获取失败')
            }).finally(()=>{
              setLoading(false)
            })
          }} icon={<ReloadOutlined spin={loading}/>}/>
        </Header>
        <Content className={'wrapper'}>
          <List
              loading={loading}
              dataSource={data}
              renderItem={(data) => {
                return <List.Item className={'hole'} actions={[
                  <>
                    PID:
                    <Typography.Text className={'action'} type={'secondary'} copyable>{data.pid}</Typography.Text>
                  </>,
                  <>
                    发布于
                    <Typography.Text className={'action'} type={'secondary'}>{moment(data.timestamp).format('YYYY-MM-DD HH:mm:ss')}</Typography.Text>
                  </>
                ]}>
                  <Typography.Paragraph className={'text'}>
                    <Tag color={'red'} icon={<DeleteOutlined/>}>{(Math.ceil((Number(new Date(data.created_at))-Number(new Date(data.timestamp)))/1000/60)).toFixed()} 分钟内被删除</Tag>
                    {data.content || <Typography.Text type={'secondary'}>[无内容]</Typography.Text>}
                  </Typography.Paragraph>
                  {data.url && <Image className={'image'} src={'https://pkuhelper.pku.edu.cn/services/pkuhole/images/'+data.url} alt={'content'}/>}
                </List.Item>
              }}
              itemLayout={'vertical'}
              pagination={{
                current: page,
                onChange(page){
                  console.log(page)
                  setPage(page)
                },
                total,
                pageSize
              }}
          />
        </Content>
        <Footer style={{textAlign: 'center'}}>Eddie 💕 v0432</Footer>
      </Layout>)
}